<template>
  <VTable ref="tableRef" v-bind="tableOptins">
    <template #form="{ form }">
      <XForm :fieldList="fieldList" :formOption="optionsData" :formData="form">
        <template #create_user="{ value, input }">
          <VCascader
            :model-value="value"
            @update:model-value="input"
            collapse-tags
            class="w-[200px]"
            placeholder="需求部门"
            type="1"
          />
        </template>
      </XForm>
    </template>
    <template #toolbar_btns>
      <VActionBar :actions="actions" />
    </template>
  </VTable>
  <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import XForm from "@/components/XForm/index.vue";
import DerivedCenter from "@/components/DerivedCenter";
import { config_name } from "@/config/export.js";
import { getTableSelectRow } from "@/hooks/tool.js";
import { getLogisticsPayPres } from "../../api.js";
import { financeManageAuthList } from "@/Auth/finance-manage.js";
const props = defineProps({
  optionsData: { type: Object, default: () => {} },
});
const { optionsData } = toRefs(props);
const tableRef = ref();
const tableOptins = reactive({
  formConfig: {
    data: {
      dateRange: { type: "settle_date", value: [], range: false }, // 组合+日期范围
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  isToggle: true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    {
      fixed: "left",
      title: "账单编号",
      width: 130,
      field: "bill_number",
    },
    // {
    //   fixed: "left",
    //   title: "头程备货单号",
    //   minWidth: 160,
    //   field: "tc_order_no",
    //   slots: {
    //     default: ({ row }) => {
    //       return <div>{row?.tc_order_no?.join(",")||'-'}</div>;
    //     },
    //   },
    // },
    { title: "物流商名称", minWidth: 200, field: "logistics_name" },
    { title: "账期", width: 100, field: "logistics_bp_name" },
    {
      title: "付款主体",
      minWidth: 200,
      field: "pay_main_company_name",
    },
    { title: "结算日期", width: 170, field: "settle_date" },
    { title: "币种", width: 100, field: "currency" },
    { title: "应付余额", width: 170, field: "pp_amount" },
    { title: "备注", minWidth: 170, field: "remark" },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        let params = {
          ...form,
          pp_bill_type: 1,
        };
        return getLogisticsPayPres({ ...params, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
const publicStyle = { style: { width: "240px" } };
const fieldList = [
  {
    field: "logistics_name",
    type: "input",
    placeholder: "物流商",
    style: { width: "240px" },
  },
  {
    field: "logistics_bp_config_id",
    type: "select",
    originField: "BpConfig",
    ...publicStyle,
    options: {
      placeholder: "账期",
      labelKey: "bp_name",
      valueKey: "logistics_bp_config_id",
    },
  },
  {
    field: "currency",
    type: "select",
    originField: "currency",
    ...publicStyle,
    options: {
      placeholder: "币种",
    },
  },
  {
    field: "department_id",
    slot: "create_user",
  },
  {
    field: "dateRange",
    type: "dateTimeRange",
    style: { width: "360px" },
    itemProps: {
      startPlaceholder: "结算最早时间",
      endPlaceholder: "结算最晚时间",
    },
  },
];
//导出中心
const DerivedCenterRef = ref();
const handleExport = () => {
  let condition = getTableSelectRow(tableRef.value);
  DerivedCenterRef.value?.open({
    tag_name:
      config_name["finance_manage"]["export_logistics_pay_pres_with_pay"],
    condition,
  });
};
const actions = [
  {
    label: "导出",
    dkicon: "icon-Upload",
    fn: handleExport,
    permission: [financeManageAuthList.forecasting.export],
  },
];
</script>
<style lang="scss" scoped>
.vx-table {
  height: calc(100% - 40px) !important;
}
</style>
